<template>
  <div>
    <h1>set</h1>
    数据变化了.视图层不变的情况(失去了响应式).用$set
    {{ person }}
    {{ arr }}
    <button @click="changeObj">修改对象</button>
    <button @click="changeArr">修改数组</button>
    <address>
      <!-- this.$set(数组/对象,下标/key, newValue) -->
    </address>
  </div>
</template>

<script>
var arr1 = [1, 2, 3, 4, 5]
export default {
  components: {},
  props: {},
  data () {
    return {
      person: {
        name: "张笑静",
        age: 22,
        iphone: "15966198337"
      },
      arr: [2, 3, 4, 5, 6]
    }
  },
  computed: {},
  methods: {
    // 无法检测 property 的添加或移除
    changeObj () {
      // delete this.person.age
      // this.person.address = "河南周口"
      this.$set(this.person, 'address', "河南周口")
    },
    // 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
    // 当你修改数组的长度时，例如：vm.items.length = newLength
    changeArr () {
      // this.arr.length = 10
      // this.arr[3] = 30
      this.$set(this.arr, 30, 30)
    }

  },
  created () {
    console.log(this.arr)
    console.log(arr1)

  },
  mounted () {

  },
}
</script>
<style scoped></style>